<template>
  <div class="hello">
    <h1>{{ txt }}</h1>html:
    <span v-html="html" />
    <br>

    <input v-model="txt">
    <br>
    {{ msg = 'hello vue!' ? 'yes' : 'no' }}
    <br>

    <!-- 变异方法 -->

    <button @click="reverseMessage">反转消息</button>
    <br>
    {{ text }}
    <br>

    <button @click="show">{{ btn }}</button>

    <p v-if="flag">{{ txt }}</p>
    <p v-else>再次点击显示</p>

    <button @click="push">新值 items</button>
    <button @click="pop">末尾删除 items</button>
    <button @click="unshift">开头添加 items</button>
    <button @click="shift">开头删除 items</button>
    <button @click="reverse">反转 items</button>
    <button @click="sort">排序 items</button>

    <h4>splice(index,len,[item])进行增删改</h4>
    <button @click="splice(1)">splice插入</button>
    <button @click="splice(2)">splice替换</button>
    <button @click="splice(3)">splice删除</button>

    <ul>
      <li v-for="(it, index) in items" :key="index">{{ index }} {{ it.message }}</li>
    </ul>

    <ul>
      <li v-for="(o, index) in obj" :key="index">{{ index }} : {{ o }}</li>
    </ul>

    <ul>
      <li v-for="(n,index) in numbertest" :key="index">{{ n }}</li>
    </ul>

    <button @click="count += 1">数值：{{ count }}</button>
    <br>

    <a :href="url">百度一下</a>

    <div :class="bg1" @[event]="click1">
      123
      <div :class="bg2" @[event].stop="click2">456</div>
    </div>

    <p>Computed reversed message: "{{ reversedMessage }}"</p>

    <p>time: "{{ date }}"</p>
    <p>time: "{{ date1 }}"</p>

    <el-date-picker v-model="date" type="datetime" placeholder="选择日期时间" default-time="12:00:00" />

    <h1>新增，移除监听事件addEventListener</h1><hr>
    <el-button @click="addListener">添加窗口大小变化事件</el-button>
    <el-button @click="removeListener">移除事件</el-button>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      date: new Date(),
      date1: new Date().toLocaleString(),
      txt: 'hello vue!',
      text: '1,2,3,5',
      msg: '',
      flag: false,
      btn: '点击显示',
      count: 0,
      html: '<span style="color: red">123<span>',
      url: 'https://www.baidu.com',
      bg1: 'bg1',
      bg2: 'bg2',
      event: 'click',
      number: [1, 2, 3, 4, 5],
      obj: {
        title: '标题',
        name: '名字',
        path: '路径'
      },
      items: [
        { message: 'one' },
        { message: 'two' },
        { message: 'three' },
        { message: 'four' },
        { message: 'five' },
        { message: 'six' }
      ]
    }
  },

  // 计算
  computed: {
    reversedMessage() {
      return this.text
        .split('')
        .reverse()
        .join('')
    },
    numbertest() {
      return this.number.filter(function(number) {
        return number < 4
      })
    }
  },
  // 监听
  watch: {
    txt: function(newVal, oldVal) {
      console.info(newVal, oldVal)
      this.msg = '新值:' + newVal + ' 旧值:' + oldVal
    }
  },
  beforeCreate() {
    console.info(
      '1.在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。'
    )
  },
  created() {
    console.info(
      '2.在实例创建完成后被立即调用,数据观测 (data observer) 和 event/watcher 事件配置之后被调用'
    )
  },
  beforeMount() {
    console.info('3.在挂载开始之前被调用：相关的 render 函数首次被调用')
  },
  mounted() {
    console.info('4.实例被挂载后调用')
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date() // 修改数据date
    }, 1000)
    // this.addListener()
  },
  methods: {
    addListener() {
      // 当浏览器窗口大小发送变化触发事件
      window.addEventListener('resize', this.handleResize)
    },
    removeListener() {
      window.removeEventListener('resize', this.handleResize)
    },
    handleResize() {
      alert('窗口发生了变化')
    },

    show() {
      this.flag = !this.flag
      this.btn = '再次点击显示'
    },
    reverseMessage() {
      this.text = this.text
        .split(',')
        .reverse()
        .join('.')
    },
    click1() {
      alert(123)
    },
    click2() {
      alert(456)
    },
    push() {
      this.items.push({ message: 'job' }) // 末尾添加
    },
    pop() {
      this.items.pop() // 末尾删除
    },
    unshift() {
      this.items.unshift({ message: 'job' }) // 开头添加
    },
    shift() {
      this.items.shift() // 开头删除
    },
    splice(i) {
      if (i === 1) {
        this.items.splice(1, 0, { message: 'job' }) // 从第二个位置添加
      } else if (i === 2) {
        this.items.splice(2, 1, { message: 'job' }) // 从第3个位置替换
      } else if (i === 3) {
        this.items.splice(1, 1) // 从第二个位置删除
      }
    },
    reverse() {
      this.items.reverse() // 反转数组
    },
    sort() {
      this.items.sort(function(a, b) {
        return a.message < b.message // 比较大小
      })
    }
  }
}
</script>

<style scoped>
.bg1 {
  background-color: yellowgreen;
}
.bg2 {
  background-color: red;
}
</style>
